<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>兑出订单详情</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/cash_out_detail.css">
  <link rel="stylesheet" href="./js/css/layui.css?t=1545041465443" media="all">
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>

</head>
<body>
<div id="app">
  <div class="order-detail">
    <!--凭证-->
    <div class="voucher-mask" v-show="cashOutOrderDetailIsShow">
    <!--<div class="voucher-mask" v-if="true">-->
      <div class="mask"></div>
      <div class="wrap">
        <div class="modal">
          <div class="model-header">
            <i></i>
            <span>查看凭证</span>
            <em @click="closeVoucher"></em>
          </div>

          <div class="layui-carousel" id="carousel">
            <div carousel-item="">
              <img v-for="(item, index) in carouselImg"
                   :src="item" :alt="index">
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--提交打款信息-->
    <div class="remittance-mask" v-show="isShowRemitMsg">
    <!--<div class="remittance-mask" v-show="true">-->
      <div class="mask"></div>
      <div class="modal">
        <form action="#">
          <div class="model-header">
            <span>提交打款信息</span>
            <i @click="closeRemitMsg"></i>
          </div>
          <div class="model-content">
            <div class="content">
              <div class="succeed-failure">
                <div class="item">
                  <label for="server1">
                    <input type="radio" id="server1" class="radio" name="ser" checked="checked">
                    <i></i>
                  </label>
                  <span>确认已成功收款</span>
                </div>
                <div class="item">
                  <label for="server2">
                    <input type="radio" id="server2" class="radio" name="ser">
                    <i></i>
                  </label>
                  <span>确认打款失败</span>
                </div>
              </div>
              <div class="upload">
                <span>上传凭证：</span>
                <div class="upload_vessel">
                  <label for="upload">
                    <input type="file" id="upload">
                    <p id="img_calc">
                      <em id="calc_num">0</em>/<em>4</em>
                    </p>
                  </label>
                </div>
              </div>
              <div class="remark">
                <span>备注：</span>
                <textarea v-model="remark"></textarea>
              </div>
              <div class="btn">
                <input type="button" value="确认" @click="submitRemitMsg">
                <input type="button" value="取消" @click="closeRemitMsg">
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>

    <div class="sidebar">
      <a class="logo" href="./index.html">NOWPAY</a>
      <a class="sidebar-item"
         v-for="(item,index) in sidebarNavList"
         :class="index === 1?'sidebar-active':''"
         :href="item.href"
      >
        <i :class="item.icon"></i>
        <span>{{item.text}}</span>
      </a>
    </div>

    <div class="main">
      <div class="main-top">
        <div class="top-content">
          <div class="content-left">欢迎使用NOVOXPAY出入金系统！</div>
          <div class="content-right">
            <span id="zfk"></span>
            <span id="watt"></span>
            <span id="hms"></span>
            <span>{{userName}}</span>
          </div>
        </div>
        <a class="top-logout" href="./login.html"></a>
      </div>
      <div class="main-warp">
        <div class="header">
          <span>订单详情</span>
          <a href="cash_out.html">返回</a>
          <input @click="showRemitMsg"
                  type="button" value="提交打款信息"/>
        </div>
        <div class="order">
          <div class="order-item" v-for="(order, fatherIndex) in orderData">
            <li v-for="(item, childIndex) in order">
              <span>{{item.key}}</span>
              <em v-if="fatherIndex !== 1 || childIndex !== 5">{{item.val}}</em>
              <strong v-if="fatherIndex === 1 && childIndex === 5"
                      @click="voucher"
              >{{item.val}}</strong>
              <i v-if="childIndex === 1"></i>
              <i v-if="childIndex === 1"></i>
            </li>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>
</body>
</html>
<script src="./js/cash_out_detail.js"></script>
<script src="./js/read_cache.js"></script>
<script src="./js/img_upload.js"></script>
<script src="./js/layui.js"></script>
<script src="./js/voucher_carousel.js"></script>
